<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="title">
    <h3>欢迎光临_vue_开发的收银系统_水果店</h3>
    <p>苹果10￥/斤,折扣&lt;8折&gt;</p>
    <p>
      请输入你要购买的斤数
      <input type="text" v-model.trim="msg" />
      <span>
        <button @click="jia">+</button>
        <button @click="jian">-</button>
      </span>
    </p>
    <button @click="fn()">结账买单~</button>
    <p>
      结账单：总价：{{ zongj }}¥元 折后价：{{ zhhj }}¥元 省了：{{ shdq }}¥元
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      zongj: "",
      zhhj: "",
      shdq: "",
    };
  },

  created() {},

  methods: {
    fn() {
      // 总价
      this.zongj = this.msg * 10;
      // 折后价格
      this.zhhj = this.msg * 10 * 0.8;
      // 省的钱
      this.shdq = this.zongj - this.zhhj;
    },
    jia() {
      this.msg++;
    },
    jian() {
      if (this.msg <= 0) return;
      this.msg--;
    },
  },
};
</script>

<style scoped lang="less"></style>
